<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a="http://topnet.it/facelets"
	xmlns:fn="http://topnet.it/functions"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">

<ui:composition template="/WEB-INF/layout/t_single.xhtml">
	<ui:define name="title">Vista Mensile</ui:define>
	<ui:define name="content">
		<h:form id="form">
			<h2>Vista Mensile</h2>
			<h:commandLink id="vistaGiorni"
				action="/prenotazioni/vista-giorni.xhtml" value="Vista Per Giorni" />
			<rich:panel id="calendario">
				<h:panelGrid columns="4" width="70%">
					<h:panelGroup>
						<h:outputLabel value="Cerca per scooter:" for="idScooter" />
						<h:selectOneMenu id="idScooter"
							value="#{organizerHandler.scooterFilter}">
							<f:selectItems value="#{scootersController.scootersItems}" />
							<a4j:ajax action="#{organizerHandler.reset}" event="change"
								render="organizer" />
						</h:selectOneMenu>
					</h:panelGroup>
				</h:panelGrid>
				<rich:messages />
				<a4j:jsFunction name="ajaxSubmit"
					oncomplete="#{rich:component('panel')}.show()"
					render="editContent" />
				<rich:calendar value="#{organizerHandler.currentDate}" popup="false"
					showApplyButton="false" cellWidth="100px" cellHeight="100px"
					boundaryDatesMode="none" showWeeksBar="false"
					dataModel="#{organizerHandler}"
					oncurrentdateselected="updateName();" id="organizer"
					changed="if (event.rich.date) {ajaxSubmit();}"
					valueChangeListener="#{organizerHandler.valueChanged}"
					showFooter="false">

					<a4j:outputPanel layout="block" id="cell"
						onclick="#{rich:component('organizer')}.resetSelectedDate()"
						style="height: 100%;">
						<h:panelGrid columns="1">
							<h:outputText value="{day}" style="align:center" />
							<h:outputText value="{data.shortDescription.escapeHTML()}" />
						</h:panelGrid>
					</a4j:outputPanel>
				</rich:calendar>
			</rich:panel>
			<a4j:jsFunction name="updateName" render="calendario"
				action="#{organizerHandler.reset}">
			</a4j:jsFunction>
		</h:form>
		<rich:modalPanel id="panel" resizeable="false">
			<f:facet name="header">Situazione del giorno</f:facet>
			<f:facet name="controls">
				<h:panelGroup>
					<h:graphicImage value="/images/modal/close.png" id="hidelink"
						styleClass="hidelink" />
					<rich:componentControl for="panel" attachTo="hidelink"
						operation="hide" event="onclick" />
				</h:panelGroup>
			</f:facet>
			<h:form>
				<h:panelGrid columns="2" id="editContent">
					<h:outputText value="Data: " />
					<h:outputText value="#{organizerHandler.currentDate}">
						<f:convertDateTime type="date" dateStyle="short" />
					</h:outputText>
					<h:outputText value="Occupati: " />
					<h:outputText value="#{organizerHandler.currentShortDescription}" />
					<h:outputText value="Descrizione: " />
					<h:outputText value="#{organizerHandler.currentDescription}"
						escape="false" />
				</h:panelGrid>
			</h:form>
		</rich:modalPanel>
	</ui:define>
</ui:composition>
</html>
